<template>
  <div>
    <!-- <h3 class="thin" :class="isItalic ? 'italic' : ''">MyStyle 组件</h3> -->
    <h3 class="thin" :class="[isItalic ? 'italic' : '',isDelete ? 'delete':'']">MyStyle 组件</h3>
    <button @click="isItalic=!isItalic" >Toggle Italic</button>
    <button @click="isDelete=!isDelete" >Toggle Delete</button>
  </div>
</template>

<script>
export default {
  name: 'MyStyle',
  data() {
    return {
      // 字体是否倾斜
      isItalic: true,
      // 是否添加删除线
      isDelete:false
    }
  }
}
</script>

<style lang="less" scoped >
// 字体变细
.thin {
  font-weight: 200;
}

// 倾斜字体
.italic {
  font-style: italic;
}

.delete{
    text-decoration:line-through;
}
</style>